<template>
  <div class="cateDetail">
    <Banner 
      ref="banner" 
      :data-id="DataID"
    />
    <!-- <Hot ref="hot" /> -->
    <Today 
      ref="today" 
      :data-id="DataID"
    />
    <All
      ref="all" 
      :data-id="DataID"
    />
    <img
      v-if="gotop"
      src="../../assets/img/totop.png"
      alt=""
      class="top"
      @click="toTop"
    >
  </div>
</template>

<script>
import Banner from "./banner.vue";
// import Hot from "./hot.vue";
import Today from "./today.vue";
import All from "./all.vue";
export default {
  name: "",
  components: {
    Banner,
    // Hot,
    Today,
    All,
  },

  data() {
    return {
      gotop: false,
      DataID: '',
    };
  },
  watch: {
    $route: function () {
		console.log("ddd")
   //    this.$refs.banner.getData(this.$route.query.id);
	  // this.$refs.today.getData(this.$route.query.id);
	  // this.$refs.all.getData(this.$route.query.id);
      // this.$refs.list.getData(this.$route.query.id)
    },
  },
  mounted() {
    this.DataID = this.$route.query.id
	this.$refs.banner.getData(this.$route.query.id);
	this.$refs.today.getData(this.$route.query.id);
	this.$refs.all.getData(this.$route.query.id);
    // this.$refs.banner.getData(this.$route.query.id);
    // this.$refs.hot.getData(this.$route.query.id);
    
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    handleScroll() {
      let scrolltop =
        document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 50 ? (this.gotop = true) : (this.gotop = false);
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
  },
};
</script>

<style scoped lang="scss">
.cateDetail {
  .top {
    z-index: 999;
    position: fixed;
    top: 45%;
    right: 8%;
    width: 4.94rem;
    height: 4.94rem;
  }
}
</style>
